<template>
  <div class="app-container flex justify-center">
    <main class="details-container-wrap flex column">
      <top-title :content="content" :titleColor="'#1388FF'" :updateTime="false" style="padding: 0"></top-title>

      <div class="control-panel-wrap flex justify-between">
        <div class="left-toogle-wrap flex">
          <div :class="toogle_active == 1 ? 'toogle-active' : ''" class="toogle-btn check-table" @click="toogle(1)">
            检查登记表
          </div>
          <div
            v-if="checkResult == 2"
            :class="toogle_active == 2 ? 'toogle-active' : ''"
            class="toogle-btn unqualified"
            @click="toogle(2)"
          >
            不合格详情
          </div>
        </div>

        <div class="toogle-btn toogle-active download-pdf-btn" @click="download_PDF">下载PDF</div>
      </div>

      <div v-if="toogle_active == 1" class="details-table-container f1">
        <common-title :title="'单位场所信息'" />
        <table>
          <tr>
            <td class="td-label">单位名称</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.companyMessageName }}</td>
            <td class="td-label">场所分类</td>
            <td class="td-value">{{ policeCheckTaskInfo.industryInformationName }}</td>
          </tr>
          <tr>
            <td class="td-label">统一社会信用代码</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.companyCreditCode || '暂无' }}</td>
            <td class="td-label">责任民警</td>
            <td class="td-value">{{ policeCheckTaskInfo.companyPoliceUserName }}</td>
          </tr>
          <tr>
            <td class="td-label">法人信息</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.companyLegalPersonName }}</td>
            <td class="td-label">法人联系方式</td>
            <td class="td-value">{{ policeCheckTaskInfo.companyLegalMobile }}</td>
          </tr>
          <tr>
            <td class="td-label">营业地址</td>
            <td class="td-value" colspan="4">{{ policeCheckTaskInfo.companyAddressDetail }}</td>
          </tr>
        </table>

        <common-title :title="'检查信息'" />
        <table>
          <tr>
            <td class="td-label">检查民/辅警</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.policeUserName }}</td>
            <td class="td-label" rowspan="5">民警签到图</td>
            <td class="td-value" rowspan="5" style="padding: 0">
              <img
                :id="policeCheckTaskInfo.signPicture"
                :data-original="imgPrefix + policeCheckTaskInfo.signPicture"
                :src="imgPrefix + policeCheckTaskInfo.signPicture"
                class="cursor cusImg signImg"
                @click="werImg(policeCheckTaskInfo.signPicture)"
              />
            </td>
          </tr>

          <tr>
            <td class="td-label">警 号</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.policeUserNo || '暂无' }}</td>
          </tr>

          <tr>
            <td class="td-label">同行民/辅警</td>
            <td class="td-value td-w-580">
              {{ handle_police_check_task_auxiliary_infoList(policeCheckTaskInfo.policeCheckTaskAuxiliaryInfoList) }}
            </td>
          </tr>

          <tr>
            <td class="td-label">检查类型</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.industryExamineName }}</td>
          </tr>

          <tr>
            <td class="td-label">检查/复查</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.checkType == 1 ? '检查' : '复查' }}</td>
          </tr>

          <tr>
            <td class="td-label">检查时间</td>
            <td class="td-value" colspan="4">{{ policeCheckTaskInfo.checkTime }}</td>
          </tr>
        </table>

        <common-title :title="'检查内容'" />
        <table style="margin-bottom: 0">
          <tr>
            <td class="td-label thead-td">检查类别</td>
            <td class="td-value td-w-740 thead-td">检查项</td>
            <td class="td-value thead-td">检查记录</td>
          </tr>
        </table>

        <div
          v-for="(iterator, index) in checkCategoryInfoList"
          v-if="checkCategoryInfoList.length"
          class="flex check-content"
        >
          <div class="check-label">
            {{ iterator.industryExamineCategoryName }}
          </div>
          <div class="f1 flex column">
            <div
              v-for="(item, index) in iterator.checkDetailInfoList"
              :class="item.pass == 0 ? 'check-wraming-color' : ''"
              class="check-context"
            >
              {{ index + 1 }}、 {{ item.industryExamineDetailName }}
            </div>
          </div>
          <div>
            <div
              v-for="(item, index) in iterator.checkDetailInfoList"
              :class="item.pass == 0 ? 'check-wraming-color' : ''"
              class="check-result"
            >
              {{ calc_pass_type(item.pass) }}
            </div>
          </div>
        </div>

        <common-title :title="'检查结果'" style="margin-top: 0.22rem" />
        <!-- 合格 -->
        <table v-if="policeCheckTaskInfo.checkResult == 1">
          <tr>
            <td class="td-label" style="height: 0.92rem">检查结果</td>
            <td class="td-value td-w-580" style="height: 0.92rem">{{ policeCheckTaskInfo.checkResultName }}</td>
            <td class="td-label" style="height: 0.92rem">责任人签名</td>
            <td class="td-value" style="height: 0.92rem; padding: 0">
              <img :src="imgPrefix + policeCheckTaskInfo.principalSignatureUrl" class="cusImg principalSignImg" />
            </td>
          </tr>
        </table>

        <!-- 不合格 -->
        <table v-else>
          <tr>
            <td class="td-label">检查结果</td>
            <td class="td-value td-w-580">{{ policeCheckTaskInfo.checkResultName }}</td>
            <td class="td-label" rowspan="4">责任人签名</td>
            <td class="td-value" rowspan="4" style="padding: 0; height: 1.8rem">
              <img :src="imgPrefix + policeCheckTaskInfo.principalSignatureUrl" class="cusImg principalSignImg2" />
            </td>
          </tr>
          <tr>
            <td class="td-label">处罚结果</td>
            <td class="td-value td-w-580">{{ policeCheckUnqualifiedInfo.rectificationTypeName }}</td>
          </tr>
          <tr>
            <td class="td-label">企业回执截止日期</td>
            <td class="td-value td-w-580">{{ policeCheckUnqualifiedInfo.penaltyEndTime }}</td>
          </tr>
          <tr>
            <td class="td-label">电子公文</td>
            <td class="td-value click-style" @click="renderDocument(policeCheckUnqualifiedInfo.id)">查看</td>
          </tr>
        </table>

        <common-title
          v-if="policeCheckUnqualifiedInfo && policeCheckUnqualifiedInfo.isReceipt == 1"
          :title="'检查回执'"
        />
        <table v-if="policeCheckUnqualifiedInfo && policeCheckUnqualifiedInfo.isReceipt == 1">
          <tr>
            <td class="td-label">回执提交时间</td>
            <td class="td-value td-w-580">{{ policeCheckUnqualifiedInfo.receiptTime }}</td>
            <td class="td-label">回执是否逾期</td>
            <td class="td-value">{{ policeCheckUnqualifiedInfo.isReceiptOverdue == 0 ? '否' : '是' }}</td>
          </tr>
          <tr>
            <td class="td-label" style="height: 1.44rem">回执图片</td>
            <td class="td-value td-w-580" style="height: 1.44rem; padding: 0">
              <div class="img-wrap flex" style="padding: 0.1rem 0.16rem">
                <img
                  v-for="(item, index) in policeCheckUnqualifiedInfo.receiptImageInfoList"
                  :id="'receiptImageInfoList' + index"
                  :key="index"
                  :data-original="`${imgPrefix + item.path}`"
                  :src="`${imgPrefix + item.path}`"
                  class="cursor cusImg"
                  @click="werImg('receiptImageInfoList' + index)"
                />
              </div>
            </td>
            <td class="td-label" style="height: 1.44rem">回执文字</td>
            <td class="td-value cancel-text-overflow" style="height: 1.44rem">
              {{ policeCheckUnqualifiedInfo.receiptContent }}
            </td>
          </tr>
        </table>

        <div v-if="checkType == 2" class="recheck">
          <common-title :title="'复查信息'" />
          <table>
            <tr>
              <td class="td-label">复查民警</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckTaskInfo.companyPoliceUserName }}</td>
              <td class="td-label" rowspan="5">民警签到图</td>
              <td class="td-value" rowspan="5" style="padding: 0">
                <img
                  :id="recheck_policeCheckTaskInfo.signPicture"
                  :data-original="imgPrefix + recheck_policeCheckTaskInfo.signPicture"
                  :src="imgPrefix + recheck_policeCheckTaskInfo.signPicture"
                  class="cursor cusImg signImg"
                  @click="werImg(recheck_policeCheckTaskInfo.signPicture)"
                />
              </td>
            </tr>

            <tr>
              <td class="td-label">警 号</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckTaskInfo.policeUserNo || '暂无' }}</td>
            </tr>

            <tr>
              <td class="td-label">辅 警</td>
              <td class="td-value td-w-580">
                {{
                  handle_police_check_task_auxiliary_infoList(
                    recheck_policeCheckTaskInfo.policeCheckTaskAuxiliaryInfoList
                  )
                }}
              </td>
            </tr>

            <tr>
              <td class="td-label">检查类型</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckTaskInfo.industryExamineName }}</td>
            </tr>

            <tr>
              <td class="td-label">检查/复查</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckTaskInfo.checkType == 1 ? '检查' : '复查' }}</td>
            </tr>

            <tr>
              <td class="td-label">复查时间</td>
              <td class="td-value" colspan="4">{{ recheck_policeCheckTaskInfo.checkTime }}</td>
            </tr>
          </table>

          <common-title :title="'复查内容'" />
          <table style="margin-bottom: 0">
            <tr>
              <td class="td-label thead-td">检查类别</td>
              <td class="td-value td-w-740 thead-td">检查项</td>
              <td class="td-value thead-td">检查记录</td>
            </tr>
          </table>

          <div
            v-for="(iterator, index) in recheck_checkCategoryInfoList"
            v-if="recheck_checkCategoryInfoList.length"
            class="flex check-content"
          >
            <div class="check-label">
              {{ iterator.industryExamineCategoryName }}
            </div>
            <div class="f1 flex column">
              <div
                v-for="(item, index) in iterator.checkDetailInfoList"
                :class="item.pass == 0 ? 'check-wraming-color' : ''"
                class="check-context"
              >
                {{ index + 1 }}、 {{ item.industryExamineDetailName }}
              </div>
            </div>
            <div>
              <div
                v-for="(item, index) in iterator.checkDetailInfoList"
                :class="item.pass == 0 ? 'check-wraming-color' : ''"
                class="check-result"
              >
                {{ calc_pass_type(item.pass) }}
              </div>
            </div>
          </div>

          <common-title :title="'复查结果'" style="margin-top: 0.22rem" />
          <!-- 合格 -->
          <table v-if="recheck_policeCheckTaskInfo.checkResult == 1">
            <tr>
              <td class="td-label" style="height: 0.92rem">检查结果</td>
              <td class="td-value td-w-580" style="height: 0.92rem">
                {{ recheck_policeCheckTaskInfo.checkResultName }}
              </td>
              <td class="td-label" style="height: 0.92rem">责任人签名</td>
              <td class="td-value" style="height: 0.92rem; padding: 0">
                <img
                  :src="imgPrefix + recheck_policeCheckTaskInfo.principalSignatureUrl"
                  class="cusImg principalSignImg"
                />
              </td>
            </tr>
          </table>

          <!-- 不合格 -->
          <table v-else>
            <tr>
              <td class="td-label">复查结果</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckTaskInfo.checkResultName }}</td>
              <td class="td-label" rowspan="4">责任人签名</td>
              <td class="td-value" rowspan="4" style="padding: 0; height: 1.8rem">
                <img
                  :src="imgPrefix + recheck_policeCheckTaskInfo.principalSignatureUrl"
                  class="cusImg principalSignImg2"
                />
              </td>
            </tr>
            <tr>
              <td class="td-label">处罚结果</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckUnqualifiedInfo.rectificationTypeName }}</td>
            </tr>
            <tr>
              <td class="td-label">企业回执截止日期</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckUnqualifiedInfo.penaltyEndTime }}</td>
            </tr>
            <tr>
              <td class="td-label">电子公文</td>
              <td class="td-value click-style" @click="renderDocument(recheck_policeCheckUnqualifiedInfo.id)">查看</td>
            </tr>
          </table>

          <common-title
            v-if="recheck_policeCheckUnqualifiedInfo && recheck_policeCheckUnqualifiedInfo.isReceipt == 1"
            :title="'复查回执'"
          />
          <table v-if="recheck_policeCheckUnqualifiedInfo && recheck_policeCheckUnqualifiedInfo.isReceipt == 1">
            <tr>
              <td class="td-label">回执提交时间</td>
              <td class="td-value td-w-580">{{ recheck_policeCheckUnqualifiedInfo.receiptTime }}</td>
              <td class="td-label">回执是否逾期</td>
              <td class="td-value">{{ recheck_policeCheckUnqualifiedInfo.isReceiptOverdue == 0 ? '是' : '否' }}</td>
            </tr>
            <tr>
              <td class="td-label" style="height: 1.44rem">回执图片</td>
              <td class="td-value td-w-580" style="height: 1.44rem; padding: 0">
                <div class="img-wrap flex" style="padding: 0.1rem 0.16rem">
                  <img
                    v-for="(item, index) in recheck_policeCheckUnqualifiedInfo.receiptImageInfoList"
                    :id="'idimg' + index"
                    :key="index"
                    :data-original="`${imgPrefix + item.path}`"
                    :src="`${imgPrefix + item.path}`"
                    class="cursor cusImg"
                    @click="werImg('idimg' + index)"
                  />
                </div>
              </td>
              <td class="td-label" style="height: 1.44rem">回执文字执图片</td>
              <td class="td-value cancel-text-overflow" style="height: 1.44rem">
                {{ recheck_policeCheckUnqualifiedInfo.receiptContent }}
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div v-if="toogle_active == 2" class="details-table-container f1">
        <common-title
          v-if="policeCheckCategoryInfoList && policeCheckCategoryInfoList.length > 0"
          :title="'检查不合格详情'"
        />
        <table>
          <div
            v-for="(item, index) in policeCheckCategoryInfoList"
            v-if="policeCheckCategoryInfoList && policeCheckCategoryInfoList.length > 0"
            :key="index"
          >
            <div v-for="(iterator, i) in item.policeCheckDetailInfoList" :key="i">
              <tr>
                <td class="td-label vm" style="color: #e8b529">不合格项 {{ index + 1 }}</td>
                <td class="td-value td-w-940 vm" style="color: #e8b529">
                  {{ iterator.sortOrder }}、{{ iterator.industryExamineDetailName }}
                </td>
              </tr>

              <tr>
                <td class="td-label vm">所属分类</td>
                <td class="td-value td-w-940 vm">【{{ item.industryExamineCategoryName }}】</td>
              </tr>

              <tr v-for="(law, index) in iterator.regulationsInfoList" :key="index">
                <td class="td-label vm" style="height: auto">法律依据 {{ index + 1 }}</td>
                <td
                  class="td-value td-w-940"
                  style="
                    height: auto;
                    overflow: visible;
                    white-space: normal;
                    text-overflow: clip;
                    padding: 0.1rem 0.2rem;
                  "
                >
                  《{{ law.regulationsName }}》-{{ law.regulationsArticleNo }} <br />
                  <div style="margin-top: 5px" v-html="law.regulationsArticleContent"></div>
                </td>
              </tr>

              <tr>
                <td class="td-label vm" style="height: auto">文字证据</td>
                <td
                  class="td-value td-w-940"
                  style="
                    height: auto;
                    overflow: visible;
                    white-space: normal;
                    text-overflow: clip;
                    padding: 0.1rem 0.2rem;
                  "
                >
                  {{ iterator.checkMemo }}
                </td>
              </tr>

              <tr v-if="iterator.failedImageInfoList && iterator.failedImageInfoList.length > 0">
                <td class="td-label vm" style="height: 1.54rem">图片证据</td>
                <td class="td-value td-w-940" style="height: 1.54rem; padding: 0">
                  <div class="img-wrap flex" style="padding: 0.1rem 0.16rem">
                    <img
                      v-for="(imgItem, index) in iterator.failedImageInfoList"
                      :id="'receiptImageInfoList' + index"
                      :key="index"
                      :data-original="imgPrefix + imgItem.path"
                      :src="imgPrefix + imgItem.path"
                      class="cursor cusImg"
                      @click="werImg('receiptImageInfoList' + index)"
                    />
                  </div>
                </td>
              </tr>
            </div>
          </div>
        </table>

        <common-title
          v-if="recheck_policeCheckCategoryInfoList && recheck_policeCheckCategoryInfoList.length > 0"
          :title="'复查不合格详情'"
        />
        <table>
          <div
            v-for="(item, index) in recheck_policeCheckCategoryInfoList"
            v-if="recheck_policeCheckCategoryInfoList && recheck_policeCheckCategoryInfoList.length > 0"
            :key="index"
          >
            <div v-for="(iterator, i) in item.policeCheckDetailInfoList" :key="i">
              <tr>
                <td class="td-label vm" style="color: #e8b529">不合格项 {{ index + 1 }}</td>
                <td class="td-value td-w-940 vm" style="color: #e8b529">
                  {{ iterator.sortOrder }}、{{ iterator.industryExamineDetailName }}
                </td>
              </tr>

              <tr>
                <td class="td-label vm">所属分类</td>
                <td class="td-value td-w-940 vm">【{{ item.industryExamineCategoryName }}】</td>
              </tr>

              <tr v-for="(law, index) in iterator.regulationsInfoList" :key="index">
                <td class="td-label vm" style="height: auto">法律依据 {{ index + 1 }}</td>
                <td
                  class="td-value td-w-940"
                  style="
                    height: auto;
                    overflow: visible;
                    white-space: normal;
                    text-overflow: clip;
                    padding: 0.1rem 0.2rem;
                  "
                >
                  《{{ law.regulationsName }}》-{{ law.regulationsArticleNo }} <br />
                  <div style="margin-top: 5px" v-html="law.regulationsArticleContent"></div>
                </td>
              </tr>

              <tr>
                <td class="td-label vm" style="height: auto">文字证据</td>
                <td
                  class="td-value td-w-940"
                  style="
                    height: auto;
                    overflow: visible;
                    white-space: normal;
                    text-overflow: clip;
                    padding: 0.1rem 0.2rem;
                  "
                >
                  {{ iterator.checkMemo }}
                </td>
              </tr>

              <tr v-if="iterator.failedImageInfoList && iterator.failedImageInfoList.length > 0">
                <td class="td-label vm" style="height: 1.54rem">图片证据</td>
                <td class="td-value td-w-940" style="height: 1.54rem; padding: 0">
                  <div class="img-wrap flex" style="padding: 0.1rem 0.16rem">
                    <img
                      v-for="(img, index) in iterator.failedImageInfoList"
                      :id="'receiptImageInfoList' + index"
                      :key="index"
                      :data-original="`${imgPrefix + img.path}`"
                      :src="`${imgPrefix + img.path}`"
                      class="cursor cusImg"
                      @click="werImg('receiptImageInfoList' + index)"
                    />
                  </div>
                </td>
              </tr>
            </div>
          </div>
        </table>
      </div>
    </main>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import topTitle from '@/components/topTitle'
import commonTitle from './commonTitle'
import { findEnableDictItemsbyCode } from '@/api/api'
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'gooverDetails',
  components: { topTitle, commonTitle },
  data() {
    return {
      imgPrefix: '',
      records: {},
      content: [['检查记录'], ['检查详情']],

      toogle_active: 1,

      checkType: undefined, //checkType  1.检查单  2.复查单
      checkResult: undefined, //checkResult  1.合格  2.不合格

      id: '',
      policeCheckTaskId: '',

      policeCheckTaskInfo: {}, // 检查单内容
      policeCheckUnqualifiedInfo: {}, //	不合格内容
      checkCategoryInfoList: [], // 检查项信息
      policeCheckCategoryInfoList: [], // 不合格信息

      recheck_policeCheckTaskInfo: {}, // 复查单内容
      recheck_policeCheckUnqualifiedInfo: {}, //	不合格内容
      recheck_checkCategoryInfoList: [], // 复查项信息
      recheck_policeCheckCategoryInfoList: [], // 不合格信息
    }
  },
  mounted() {
    this.get_dict()
    let { checkType, checkResult, policeCheckTaskId, id } = this.$route.query
    this.checkType = checkType
    this.checkResult = checkResult
    this.id = id
    if (checkType == 2) {
      this.policeCheckTaskId = policeCheckTaskId
      this.get_check_details(policeCheckTaskId)
      this.get_check_details(id, true)
    } else {
      this.get_check_details(id)
    }
  },
  methods: {
    download_PDF() {
      let { checkType, checkResult, policeCheckTaskId, id } = this.$route.query
      const { href } = this.$router.resolve({
        path: '/goover/gooverDetails/printPDF',
        query: { checkType, checkResult, policeCheckTaskId, id },
      })
      window.open(href, '_blank')
    },

    toogle(type) {
      this.toogle_active = type
    },

    async get_dict() {
      let res = await findEnableDictItemsbyCode({ code: 'static_server' })
      this.imgPrefix = res.result[0].value
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    handle_police_check_task_auxiliary_infoList(list) {
      if (!list) return '暂无'
      if (list.length < 0) return '暂无'
      const policeUserNames = list.map((item) => item.policeUserName)
      return policeUserNames.join(',')
    },

    async get_check_details(taskId, isRecheck = false) {
      let {
        result: { policeCheckTaskInfo, policeCheckUnqualifiedInfo, checkCategoryInfoList, policeCheckCategoryInfoList },
      } = await getAction('/police/check_task/record', { taskId })

      if (isRecheck) {
        this.recheck_policeCheckTaskInfo = policeCheckTaskInfo
        this.recheck_policeCheckUnqualifiedInfo = policeCheckUnqualifiedInfo
        this.recheck_checkCategoryInfoList = checkCategoryInfoList
        this.recheck_policeCheckCategoryInfoList = policeCheckCategoryInfoList
        console.log(this.recheck_policeCheckCategoryInfoList, '1')
      } else {
        this.policeCheckTaskInfo = policeCheckTaskInfo
        this.policeCheckUnqualifiedInfo = policeCheckUnqualifiedInfo
        this.checkCategoryInfoList = checkCategoryInfoList
        this.policeCheckCategoryInfoList = policeCheckCategoryInfoList
      }
    },

    renderDocument(id) {
      const { href } = this.$router.resolve({
        path: '/goover/gooverDetails/document',
        query: { id },
      })
      window.open(href, '_blank')

      // this.$router.push({ path: '/goover/gooverDetails/document', query: { id } })
    },

    calc_pass_type(type) {
      if (type == 1) return '是'
      else if (type == 0) return '否'
      else if (type == 2) return '不涉及'
      else return '暂无'
    },
  },
}
</script>

<style lang="less" scoped>
.cancel-text-overflow {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-all;
}

.details-table-container {
  table {
    font-family: PingFang SC-Medium, PingFang SC;
    border-collapse: collapse;
    font-weight: 500;
    margin-top: 0.12rem;
    margin-bottom: 0.22rem;
    border-top: 1px solid var(--theme-input-border);
    border-left: 1px solid var(--theme-input-border);
  }
  tr {
    width: 100%;
    height: 0.46rem;
    font-size: 0.14rem;
    border-bottom: 1px solid var(--theme-input-border);
  }
}

.thead-td {
  background: var(--theme-header-th-bg);
  border: 1px solid var(--theme-input-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-tab-text-color) !important;
}

.td-label {
  color: var(--theme-tab-text-color);
  width: 1.6rem;
  text-align: center;
  background: var(--theme-modal-label-bg);
  border-right: 1px solid var(--theme-input-border);
}

.td-value {
  background: var(--theme-container-bg);
  border-right: 1px solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 0.25rem;
  width: 2.1rem;
  max-width: 2.1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  .signImg {
    width: 2.1rem;
    height: 2.3rem;
    // object-fit: cover;
  }
  .principalSignImg {
    height: 0.92rem;
    width: 100%;
    object-fit: contain;
    background-color: #fff;
  }
  .principalSignImg2 {
    height: 1.8rem;
    width: 100%;
    object-fit: contain;
    background-color: #fff;
  }

  .img-wrap {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    img {
      width: 1.74rem;
      height: 1.3rem;
      margin-right: 0.2rem;
      object-fit: cover;
    }
  }
}

.td-w-580 {
  width: 5.8rem;
  max-width: 5.8rem;
}

.td-w-740 {
  width: 7.4rem;
  max-width: 7.4rem;
}

.td-w-940 {
  width: 9.4rem;
  max-width: 9.4rem;
}

.vm {
  vertical-align: middle;
}
.click-style {
  color: #47e829;
  cursor: pointer;
}
</style>

<style lang="less" scoped>
.app-container {
  padding: 0;
  background: var(--theme-content-bg);
  font-family: PingFang SC-Medium, PingFang SC;

  main {
    width: 12rem;
    min-height: 0;
  }

  // 按钮控制栏
  .control-panel-wrap {
    font-size: 0.14rem;
    font-weight: 500;
    color: #509eee;
    margin-bottom: 12px;

    .toogle-btn {
      background: var(--theme-container-bg);
      border: 0.01rem solid var(--theme-input-border);
      padding: 0.1rem 0.4rem;
      cursor: pointer;

      display: flex;
      align-items: center;
    }

    .toogle-active {
      font-size: 0.16rem;
      font-weight: bold;
      color: #0e2b48;
      background: #1388ff;
      border: 0.01rem solid var(--theme-input-border);
    }

    .download-pdf-btn {
      border-radius: 4px;
      padding: 0.1rem 0.2rem;
    }
  }

  .details-table-container {
    padding: 0.26rem 0.45rem;
    background: var(--theme-container-bg);
    overflow: scroll;
  }

  .check-content {
    .check-label {
      background: var(--theme-modal-label-bg);
      border: 0.01rem solid var(--theme-input-border);
      color: var(--theme-tab-text-color);
      width: 1.6rem;
      border-top: none;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .check-context {
      color: var(--theme-modal-label-value-color);
      background: var(--theme-container-bg);
      border-bottom: 1px solid var(--theme-input-border);
      height: 0.46rem;
      line-height: 0.46rem;
      padding-left: 0.2rem;
    }
    .check-result {
      background: var(--theme-container-bg);
      border: 1px solid var(--theme-input-border);
      color: var(--theme-modal-label-value-color);
      width: 2.1rem;
      height: 0.46rem;
      border-top: none;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .check-wraming-color {
      color: #e8b529;
    }
  }
}
</style>
